<script>
  import Course from './Course.svelte'
  import SectionTitle from './Title.svelte'
  import Total from './Total.svelte'
  export let courses = []
  export let total = 0
</script>

<section>
  <Total title="总和" {total} />
  <SectionTitle title="课程列表" />

  <!-- 根据遍历数据渲染对应的UI结构 -->
  {#each courses as course}
    <Course {...course} />
  {:else}
    <h2>目前还没有任何课程上线</h2>
  {/each}
</section>
